<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>讲师详情</title>
    <link rel="stylesheet" href="xiangqing.css">
</head>
<body>

<div class="nav-bar">
    <div class="content bx">
        <div class="top">
            <div class="left">
                <h1>
                    <a href="#">
                        联通学院
                    </a>
                </h1>
            </div>
            <div class="center">
                <form action="">
                    <div class="search-bar">
                        <div class="category">
                            <label>
                                <select name="category">
                                    <option value="all">全部</option>
                                    <option value="teacher">动态</option>
                                    <option value="course">讲师</option>
                                    <option value="article">课程</option>
                                </select>
                            </label>

                        </div>
                        <div class="keyword">
                            <label>
                                <input name="kw" type="text" placeholder="请输入搜索的关键字">
                            </label>
                        </div>
                        <div class="search-btn">
                            <input type="submit" value="&#xe604; 搜索" class="iconfont">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <ul class="menu-bar">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">信息中心</a></li>
                    <li><a href="#">教师中心</a></li>
                    <li><a href="#">课程专栏</a></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li class="iconfont icon-xiaochengxu">
                        微信小程序
                        <div class="detail-pane">
                            <p class="title">微信小程序</p>
                            <p class="intro">- 小程序, 真是好呀! -</p>
                            <img class="qr_code" src="../../../components/image/ewm_lk.jpg" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--2. 讲师简介条-->
<div class="teacher-intro">
    <div class="content bx">
        <img class="t-header" src="../pic/head.png" alt="">
        <div class="intro-pane">
            <p class="t-position-name is-star">联通讲师: 李指导</p>
            <p class="desc">李指导, 超厉害</p>
        </div>
    </div>
</div>

<!--3. 章节提示-->
<div class="section-notice">
    <div class="content bx">
        <ul class="menus">
            <li class="current"><a href="#">发布课程</a></li>
        </ul>
    </div>
</div>

<!--4. 课程列表-->
<div class="course-list bx">
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/1.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                联通云技术能力概述
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/2.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                智慧客服讲堂
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/3.jpg" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                M域系统网络支撑培训
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/4.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                沃分享-IT讲堂
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/5.jpg" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
               广东楼宇的“深”与“智”
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/6.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
               区块链技术、应用及联通发展建议
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/7.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                强大基座、数字化转型新动力
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/8.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                数字化时代下的全域营销
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/9.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                政企市场经营分析材料编制技巧
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/10.jpg" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                "云+网+X”营销转型
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/11.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
               法制合规云讲堂
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/12.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
             基于价值提升的企业流程变革与治理
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
    <div class="course-card column5">
        <div class="image">
            <span class="tag">热门</span>
            <a href="#">
                <img src="../pic/13.png" alt="">
            </a>
        </div>
        <div class="title">
            <a href="#">
                ERP课程
            </a>
        </div>
        <div class="score">
            <div class="star">
                <div class="y_star" style="width: 50%;"></div>
            </div>
            <span class="score_text">4分</span>
        </div>
        <div class="zan">
            <span class="good iconfont icon-icon_good">100人好评</span>
        </div>
    </div>
</div>

<div class="subscript">
    <div class="content bx">
        <div class="item">
            <img class="logo" src="http://wsxy.chinaunicom.cn/learner/assets/learner/unicomlogo.png" alt="">
        </div>
        <div class="item">
            <div class="title" >客服电话：15611085701</div>
            <div class="subtitle" >服务时间：法定工作日，8：00-18：30</div>
        </div>
        <div class="item">
            <img onclick="show()" class="ewm" src="http://wsxy.chinaunicom.cn/content/upload/2020/07/10/a43329d6-1d84-4533-bfbd-5b333b21db31.png" alt="中国联通微学堂">
            <p>中国联通微学堂</p>
        </div>
    </div>
    <div class="mask">
        <div class="pane">
            <img src="http://wsxy.chinaunicom.cn/content/upload/2020/07/10/a43329d6-1d84-4533-bfbd-5b333b21db31.png" alt="">
            <span onclick="hide()" class="close">x</span>
        </div>
    </div>
</div>
<script>

    let lbt = document.getElementsByClassName("bg")[0];


    // 1. 获取所有的标题 li; 监听鼠标放到这个li时机
    let current = 0;
    let titleLis = document.querySelectorAll(".title-pane>li");
    let imageLis = document.querySelectorAll(".image-pane>li");
    for (let i = 0, len = titleLis.length; i < len; i++) {
        let titleLi = titleLis[i];
        titleLi.onmouseover = function () {
            // console.log("当前鼠标放到了li", i)

            // 1.0 清空上一个元素  class
            titleLis[current].className = ""
            imageLis[current].className = ""

            // 1.1 给当前这个需要对应的标题li 添加一个active类名
            titleLis[i].className = "active"

            // 1.2 给同样序号的 图片 li, 添加一个active类名
            imageLis[i].className = "active"


            current = i;
            lbt.style.backgroundImage = `url(${imageLis[i].getElementsByTagName("img")[0].src})`;

        }
    }


</script>

<script>

    function show() {
        let mask = document.getElementsByClassName("mask")[0]
        mask.classList.add("show")
    }
    function hide() {
        let mask = document.getElementsByClassName("mask")[0]
        mask.classList.remove("show")
    }


</script>


</body>
</html>